<template>

  <cube-scroll-nav :side="true"
                   :data="dataList"
                   :current="current"
                   class="goods">
    <cube-scroll-nav-panel class="menuTitle"
                           v-for="item in dataList"
                           :key="item.name"
                           :label="item.name"
                           :title="item.name">
      <ul>
        <li v-for="food in item.foods"
            :key="food.name"
            class="foodItem">
          <div>
            <img :src="food.icon"
                 class="firstImg">
          </div>
          <div class="foodInfo">
            <div>{{food.name}}</div>
            <div>
              <span style="margin-right: 10px;">月售1132份</span>
              <span>好评率100%</span>
            </div>
            <div class="price">
              <span><span>¥</span><span style="font-size: 15px;font-weight: 700;">24</span></span>
              <span style="font-size: 11px;text-decoration: line-through;">¥28</span>
            </div>
          </div>

        </li>
      </ul>
    </cube-scroll-nav-panel>
  </cube-scroll-nav>
</template>

<script>
export default {
  data () {
    return {
      dataList: [
        {
          name: "热销榜",
          // type: "-1",
          foods: [
            {
              name: "皮蛋瘦肉粥1",
              icon: "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/114/h/114",
              image: "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              name: "皮蛋瘦肉粥2",
              icon: "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/114/h/114",
              image: "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              name: "皮蛋瘦肉粥3",
              icon: "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/114/h/114",
              image: "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              name: "皮蛋瘦肉粥4",
              icon: "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/114/h/114",
              image: "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/750/h/750"
            },
          ]
        },
        {
          name: "精选凉菜",
          // type: -1,
          foods: [
            {
              name: "面1",
              icon: "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/114/h/114",
              image: "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              name: "皮蛋瘦肉粥5",
              icon: "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/114/h/114",
              image: "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              name: "皮蛋瘦肉粥6",
              icon: "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/114/h/114",
              image: "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              name: "皮蛋瘦肉粥7",
              icon: "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/114/h/114",
              image: "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/750/h/750"
            },
          ]
        },
        {
          name: "特色炒菜",
          // type: -1,
          foods: [
            {
              name: "西红柿",
              icon: "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/114/h/114",
              image: "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              name: "皮蛋瘦肉粥8",
              icon: "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/114/h/114",
              image: "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              name: "皮蛋瘦肉粥9",
              icon: "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/114/h/114",
              image: "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              name: "皮蛋瘦肉粥10",
              icon: "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/114/h/114",
              image: "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              name: "皮蛋瘦肉粥11",
              icon: "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/114/h/114",
              image: "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              name: "皮蛋瘦肉粥12",
              icon: "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/114/h/114",
              image: "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/750/h/750"
            },
          ]
        },
      ],
      current: '热销榜'
    }
  },
  methods: {
  }
}
</script>

<style lang="less" scoped>
/deep/ .cube-scroll-nav-panel-title {
  height: 0.9333rem;
  font-size: 0.4rem;
  color: rgb(183, 185, 190);
  background: rgb(244, 245, 247);
  line-height: 0.9333rem;
  padding-left: 10px;
  border-left: 2px solid rgb(214, 217, 222);
}
/deep/ .cube-scroll-nav-bar {
  background-color: rgb(244, 245, 247);
}
/deep/ .cube-scroll-nav-bar-item_active {
  background-color: rgb(255, 255, 255);
  // color: rgb(32, 44, 50);
  // font-size: 0.4267rem;
  // font-weight: 500 !important;
}
.foodItem {
  display: flex;
  height: 2.9333rem;
}
.foodItem > div:nth-child(1) {
  width: 1.8667rem;
  display: flex;
  justify-content: flex-end;
}
.foodItem > div:nth-child(2) {
  flex: 1;
}
.firstImg {
  margin-top: 0.4533rem;
  height: 1.6rem;
  width: 1.6rem;
}
.foodInfo {
  font-size: 0.32rem !important;
  font-weight: 100 !important;
  color: rgb(191, 195, 197);
  margin-left: 0.4rem;
}
.foodInfo > div:nth-child(1) {
  font-size: 0.4rem;
  color: rgb(74, 87, 95);
  margin-top: 0.4533rem;
}
.foodInfo > div:nth-child(2) {
  margin: 10px 0px;
}
.price > span:nth-child(1) {
  margin-right: 0.2667rem;
  color: rgb(243, 3, 32);
}
.goods {
  // flex: 1;
  height: 92vh;
  border-top: 2px solid rgb(237, 238, 240);

  // flex: 1;
}
</style>